<template>
  <section class="main-content">
    <h3>各科目试卷上传进度</h3>
    <ul>
      <li>
        <label>素描</label>
        <div class="progress-bar">
          <div class="green"></div>
          <span>已上传10000张</span>
        </div>
      </li>
      <li>
        <label>色彩</label>
        <div class="progress-bar">
          <div class="blue"></div>
          <span>已上传10000张</span>
        </div>
      </li>
      <li>
        <label>速写</label>
        <div class="progress-bar">
          <div class="pink"></div>
          <span>已上传10000张</span>
        </div>
      </li>
    </ul>
    <div class="selection">
      <div class="box-fl">
        <el-select
          class="choose-province"
          v-model="value"
          placeholder="选择省份"
        >
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value">
          </el-option>
        </el-select>
        <el-select v-model="value" placeholder="选择科目">
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value">
          </el-option>
        </el-select>
        <span>～</span>
        <el-select v-model="value" placeholder="选择上传进度">
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value">
          </el-option>
        </el-select>
        <el-button class="btn-query" type="primary">查询</el-button>
      </div>
      <el-button 
        class="btn-upload-paper"
        type="primary"
        @click="uploadDialogVisible = true"
      >上传试卷</el-button>
    </div>
    <el-table
      :data="tableData"
      style="width: 100%"
      height="400"
      border
    >
      <el-table-column
        fixed
        prop="date"
        label="准考证号"
        width="150"
      >
      </el-table-column>
      <el-table-column
        prop="name"
        label="省份"
        width="120"
      >
      </el-table-column>
      <el-table-column
        prop="province"
        label="考场"
        width="150"
      >
      </el-table-column>
      <el-table-column
        prop="city"
        label="素描"
        width="180"
      >
        <template>
          <!--  slot-scope="scope" -->
          <div class="unit-inner">
            <img src="" alt="" width="95px" height="116px">
            <span class="red" @click="deleteDialogVisible = true">删除</span>
            <!-- <span class="blue" @click="modifyDialogVisible = true">修改</span> -->
          </div>
        </template>
      </el-table-column>
      <el-table-column
        prop="色彩"
        label="地址"
        width="300"
      >
      </el-table-column>
      <el-table-column
        prop="zip"
        label="速写"
        width="150"
      >
      </el-table-column>
      <el-table-column
        prop="zip"
        label="操作"
        width="150"
      >
        <template>
          <!--  slot-scope="scope" -->
          <div class="unit-inner__option">
            <span class="delete-paper" @click="dialogVisible = true">删除试卷</span>
          </div>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      class="pager"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="currentPage4"
      :page-sizes="[100, 200, 300, 400]"
      :page-size="100"
      layout="total, sizes, prev, pager, next, jumper"
      :total="400"
    >
    </el-pagination>

    <!-- 修改弹窗 -->
    <el-dialog
      title="修改"
      :visible.sync="modifyDialogVisible"
      width="488px"
      height="533px"
    >
      <div class="dialog-inner__modify">
        <img src="../image/file.png" alt="图片" width="244px" height="293px">
        <span slot="footer" class="dialog-footer">
          <el-button @click="dialogVisible = false">重新上传</el-button>
          <el-button type="primary" @click="dialogVisible = false">确认修改</el-button>
        </span>
      </div>
    </el-dialog>

    <!-- 修改成功对话框 -->
    <el-dialog
      :visible.sync="dialog__modify--succeed"
      width="330px"
      height="216px"
      :visible.sync="modifyDialogSucceedVisible"
    >
      <div class="dialog__modify--succeed">
        <img src="../image/ok.png" alt="图片">
        <span>修改成功</span>
        <span slot="footer" class="dialog-footer">
          <el-button type="primary" @click="dialogVisible = false">确定</el-button>
        </span>
      </div>
    </el-dialog>


    <!-- 上传试卷弹窗 -->
    <el-dialog
      title="上传试卷"
      :visible.sync="uploadDialogVisible"
      class="upload-file-dialog"
      width="488px"
    >
      <el-upload
        action="https://jsonplaceholder.typicode.com/posts/"
        :on-preview="handlePreview"
        :on-exceed="handleExceed"
      >
        <div class="upload-file">
          <img src="../image/file.png" alt="file">
          <dl>
            <dt>点击或将文件拖拽到这里上传</dt>
            <dd>支持扩展名：rar、zip、doc、docx、pdf、jpg...</dd>
          </dl>
        </div>
      </el-upload>
    </el-dialog>
  </section> 
</template>

<script>

export default {
  name: 'Stuff',
  components: {
    // HelloWorld
  },

  methods: {
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
    },
    handleEdit() {

    },
    handlePreview(file) {
      console.log(file);
    },
    handleExceed(files, fileList) {
      this.$message.warning(`当前限制选择 3 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`);
    },
  },

  data() {
    return {
      modifyDialogVisible: false,
      uploadDialogVisible: false,
      deleteDialogVisible: false,
      modifyDialogSucceedVisible: false,
      options: [{
        value: '选项1',
        label: '黄金糕'
      }, {
        value: '选项2',
        label: '双皮奶'
      }, {
        value: '选项3',
        label: '蚵仔煎'
      }, {
        value: '选项4',
        label: '龙须面'
      }, {
        value: '选项5',
        label: '北京烤鸭'
      }],
      value: '',
      tableData: [{
        date: '2016-05-03',
        name: '王小虎',
        province: '上海',
        city: '普陀区',
        address: '上海市普陀区金沙江路 1518 弄',
        zip: 200333
      }, {
        date: '2016-05-02',
        name: '王小虎',
        province: '上海',
        city: '普陀区',
        address: '上海市普陀区金沙江路 1518 弄',
        zip: 200333
      }, {
        date: '2016-05-04',
        name: '王小虎',
        province: '上海',
        city: '普陀区',
        address: '上海市普陀区金沙江路 1518 弄',
        zip: 200333
      }, {
        date: '2016-05-01',
        name: '王小虎',
        province: '上海',
        city: '普陀区',
        address: '上海市普陀区金沙江路 1518 弄',
        zip: 200333
      }],
      currentPage1: 5,
      currentPage2: 5,
      currentPage3: 5,
      currentPage4: 4
    }
  },
}
</script>

<style scoped lang="scss">
    h3,
    ul > li > label {
      color: #0E0E0E;
      font-size: 19px;
      font-weight: 800;
    }
    h3 {
      margin: 30px 0;
      text-align: left;
    }
    ul {
      margin-bottom: 30px;
      width: 100%;
      height: 30px;
      li {
        display: inline-block;
        margin-right: 36px;
        font-size: 0;
        label {
          float: left;
          margin-right: 12px;
          font-size: 19px;
          font-weight: 800;
          color: #0e0e0e;
        }
        .progress-bar {
          float: left;
          position: relative;
          overflow: hidden;
          width: 314px;
          height: 30px;
          background-color: #CBCEDC;
          border-radius: 7px;
          div {
            position: absolute;
            z-index: 1;
            width: 10px;
            height: 100%;
          }
          span {
            position: absolute;
            z-index: 2;
            left: 0;
            width: 100%;
            color: #fff;
            font-size: 15px;
            line-height: 30px;
            text-align: center;
          }
        }
        .green {
          background-color: #59BF99;
        }
        .blue {
          background-color: #557DFF;
        }
        .pink {
          background-color: #DE5887;
        }
      }
    }
    .selection {
      margin-bottom: 19px;
      overflow: hidden;
      width: 100%;
      .box-fl {
        float: left;
        .choose-province {
          margin-right: 23px;
        }
        span {
          padding: 0 6px;
          line-height: 38px;
          font-size: 18px;
          color: #0E0E0E;
        }
      }
      .btn-query {
        margin-left: 23px;
      }
      .btn-upload-paper {
        float: right;
      }
    }
    .pager {
      float: right;
      margin: 23px auto 30px;
    }
    .unit-inner {
      width: 100%;
      height: 100%;
      text-align: center;
      span {
        position: absolute;
        bottom: 0;
        right: 0;
        width: 37px;
        height: 20px;
        text-align: center;
        font-size: 11px;
        color: #fff;
        border-radius: 8px 0px 0px 0px;
        cursor: pointer;
      }
      .red {
        background-color: #EC2D56;
      }
      .blue {
        background-color: #204BD6;
      }
    }
    .unit-inner__option {
      width: 100%;
      height: 100%;
      text-align: center;
      .delete-paper {
        color: #1B1B1B;
        font-weight: bold;
        cursor: pointer;
      }
    }
    .dialog-inner__modify {
      img {
        padding: 9px;
        width: 244px;
        height: 293px;
        border: 1px solid #D8D8D8;
      }
      .dialog-footer {
        display: block;
      }
    }
    .upload-file-dialog {
      >>.el-dialog {
        height: 315px;
        border-radius: 15px;
        .el-dialog__header {
          height: 70px;
          border-bottom: 1px solid #D8D8D8;
        }
      }
      .upload-file {
        width: 345px;
        height: 185px;
        background-color: #F3F3F3;
        border-radius: 8px;
        img {
          margin: 43px auto 24px;
          width: 48px;
          height: 38px;
          border: 1px dashed #F3F3F3;
        }
        dl {
          margin: 0;
          dt {
            margin-bottom: 12px;
            font-size: 15px;
            font-weight: bold; 
            color: #0E0E0E;
          }
          dd {
            margin: 0;
            color: #919191;
          }
        }
      }
    }
    .dialog__modify--succeed {

    }
</style>
